// 离线作业
<template>
    <f7-page class="common-page page-tab has-bottom-btns">
      <f7-navbar>
          <f7-nav-left>
              <f7-link back icon-material="chevron_left" force></f7-link>
          </f7-nav-left>
          <f7-nav-title>离线作业</f7-nav-title>
          <f7-nav-right></f7-nav-right>
      </f7-navbar>
      <div class="common-page-content">
        <van-tabs sticky>
          <van-tab name="#tab1" title="离线作业申请">
            <!-- 离线作业申请 -->
            <div id="tab1">
              <v-accordion title="离线申请">
                <van-form ref="form" :readonly="!canEdit">
                  <van-field
                    v-model="controlData.property.propertyCode"
                    rows="1"
                    autosize
                    label="产权编号"
                    type="textarea"
                    placeholder="请输入"
                    readonly
                  />
                  <van-field
                    v-model="controlData.property.equipmentTypeName"
                    rows="1"
                    autosize
                    label="设备类型"
                    type="textarea"
                    placeholder="请输入"
                    readonly
                  />
                  <van-field
                    v-model="controlData.enginee.engineeName"
                    rows="1"
                    autosize
                    label="工程名称"
                    type="textarea"
                    placeholder="请输入"
                    readonly
                  />
                  <van-field
                    v-model="models.model.memo"
                    rows="5"
                    required
                    :rules="[{ required: true, message: '请填写' }]"
                    autosize
                    label="申请原因"
                    type="textarea"
                    placeholder="请输入"
                  />
                  <van-field
                    rows="5"
                    required
                    autosize
                    label="说明文件"
                    type="textarea"
                    placeholder="请输入"
                    readonly
                  >
                    <div slot="input">
                      <qm-file-upload
                          ref="reason"
                          v-if="models.model.id"
                          :galleryOptions="{ multiple: true, maximum: 9 }"
                          :disabled="!canEdit"
                          :params="{
                              type: 'attach',
                              dataKey: models.model.id,
                              bizType: 'OFFLINE_APPLY_FILE',
                          }"
                          uploadId="reason"
                      >
                      </qm-file-upload>
                    </div>
                  </van-field>
                </van-form>
              </v-accordion>
            </div>
          </van-tab>
          <van-tab name="#tab2" title="流程进度">
            <!-- 流程进度 -->
            <div id="tab2" class="p15">
                <section class="qzjx-card">
                  <div class="title" style="font-size:16px;">业务流程</div>
                  <v-workflow-step :data="history"></v-workflow-step>
                </section>
                <section class="qzjx-card">
                  <div class="title" style="font-size:16px;">操作记录</div>
                  <v-workflow-list :data="controlData.workflow.history"></v-workflow-list>
                </section>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <f7-toolbar position="bottom" no-shadow class="fff" v-if="pageAction!='view'">
        <template v-if="canEdit">
          <f7-button fill class="submit-btn" @click="fnCheck('showPinion1')">提交</f7-button>
        </template>
        <template v-else>
          <f7-button fill class="submit-btn plain-btn" @click="fnCheck('showPinion')">退回</f7-button>
          <f7-button fill class="submit-btn" @click="fnCheck('showPinion1')">通过</f7-button>
        </template>
      </f7-toolbar>
      <!-- 审核意见 -->
        <v-popup-opinion
            v-model="showPinion"
            :selectUser="selectUser"
            ref="opinion"
            @save="saveBack"
        >
        </v-popup-opinion>
        <!-- 审核意见 end -->
        <v-popup-opinion
            v-model="showPinion1"
            :selectUser="selectUser"
            ref="opinion"
            @save="savePass"
        >
        </v-popup-opinion>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/workflowController"
import Config from "@/libs/config.js";
export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: ["/workflow/serviceGuideExt/getEntityByCode","/equipment/eqmOfflineWork/workflow/getWorkflowViewModel"],
        };
    }

    onInit () {
      this.$params.appCode = "offlineWork";
    }
    onBeforeQuery (type, conditions, params) { }
    onAfterQuery (type, isSuccess, result) {
      if(type=='form'){
        if(result.controlData.progress){
          this.context.history=result.controlData.progress.data
          this.context.taskCode=result.controlData.progress.taskCode
        }else{
          this.context.history=[]
        }
      }else{
        
      }
      return result;
    }
    mixin () {
        return {
          components: {},
            data () {
                return {
                  taskCode:'',
                  history:[],
                  models: {
                    process:{
                      checkTime:'',
                      isRequire:true,
                      checkMemo:''
                    },
                    model:{

                    },
                  },
                  controlData:{
                    property:{},
                    workflow:{},
                    enginee:{},
                  },
                  showPinion:false,
                  showPinion1:false,
                  selectUser: {
                    selectComment: null,
                    comment: null,
                    comments: [],
                    tran: [],
                    activity: "",
                    users: [],
                  },
                };
            },
            methods: {
              fnCheck(show){
                if(this.canEdit){
                  this.$refs.form.validate().then((_) => {
                    if(this.$refs.reason.getUploadedCount()==0){
                      return this.$toast('请上传说明文件！')
                    }
                    this[show]=true
                  })
                  .catch((err) => {
                    this.$toast('表单填写不完整！')
                  });
                }else{
                  this[show]=true
                }
              },
              saveBack(){
                this.$f7.preloader.show();
                this.super.fnBackJump(
                  this.selectUser.comment,
                  (result) => {
                    this.$f7.preloader.hide();
                    if (result.success) {
                      this.showPinion=false
                      this.refreshData('退回成功')
                    }else{
                      this.$f7.dialog.alert(result.message)
                    }
                  },
                  (e)=>{
                    console.log('退回失败---',e);
                    this.$f7.preloader.hide();
                  },
                  'usertask1'
                )
              },
              refreshData(msg) {
                this.$f7.dialog.alert(msg, () => {
                  this.$f7.popup.close();
                  this.$f7.views.current.router.back({force:true})
                })
              },
              savePass(){
                this.showPinion1=false
                this.models.model.notifyId=this.$f7route.query.notifyId
                this.send();
              },
            },
            computed: {
              canEdit(){
                return this.pageAction!='view'&&this.taskCode=='usertask1'?true:false
              },
            },
            mounted () {},
        };
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');
.common-page{
  .submit-btn {
      flex: 1;
      margin: 0 10px;
      border-radius: 24px;
  }
  .qzjx-card{
    .label{
      color: #333333;
    }
    .value /deep/.van-icon{
      color: #B5BCCA;
      margin-left: 10px;
    }
  }
  /deep/ .accordion{
    background: #fff;
    margin-top: 10px!important;
  }
  /deep/ .van-icon{
    margin-left: 0!important;
  }
  /deep/ .van-form{
    .van-field{
      display: flex;
      flex-direction: column;
      .van-field__body{
        textarea,input{
          background: #f7f6f9;
          padding: 10px;
          border-radius: 4px;
          margin-top: 5px;
        }
      }
    }
  }
  /deep/ .pic_upload{
    padding: 10px 0;
  }
}
</style>
